﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Walkthrough Part I: Generate a Simple Documentation Website | DocFX website </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="Walkthrough Part I: Generate a Simple Documentation Website | DocFX website ">
    <meta name="generator" content="docfx 2.37.0.0">
    
    <link rel="shortcut icon" href="../../favicon.ico">
    <link rel="stylesheet" href="../../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../../styles/docfx.css">
    <link rel="stylesheet" href="../../styles/main.css">
    <meta property="docfx:navrel" content="../../toc.html">
    <meta property="docfx:tocrel" content="../toc.html">
    
    <meta property="docfx:rel" content="../../">
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="../../index.html">
                <img id="logo" class="svg" src="../../logo.svg" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <form class="navbar-form navbar-right" role="search" id="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
                </div>
              </form>
            </div>
          </div>
        </nav>
        
        <div class="subnav navbar navbar-default">
          <div class="container hide-when-search" id="breadcrumb">
            <ul class="breadcrumb">
              <li></li>
            </ul>
          </div>
        </div>
      </header>
      <div class="container body-content">
        
        <div id="search-results">
          <div class="search-list"></div>
          <div class="sr-items">
            <p><i class="glyphicon glyphicon-refresh index-loading"></i></p>
          </div>
          <ul id="pagination"></ul>
        </div>
      </div>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="">
<h1 id="walkthrough-part-i-generate-a-simple-documentation-website">Walkthrough Part I: Generate a Simple Documentation Website</h1>

<p>By completing this walkthrough, you'll become familiar with the workflow of <code>docfx</code> and the general principle of organizing documents inside <code>docfx</code>. You will finish this walkthrough with a static website that can be published to any host service. Download the files used in this walkthrough <a href="artifacts/walkthrough1.zip">here</a>.</p>
<h2 id="step1-setup-docfx">Step1. Setup DocFX</h2>
<p>Download <em>docfx</em> from <a href="http://dotnet.github.io/docfx/">http://dotnet.github.io/docfx/</a>. <a href="http://dotnet.github.io/docfx/tutorial/docfx_getting_started.html#2-use-docfx-exe-directly">Getting Started with docfx</a> describes three ways to install <em>docfx</em>. This walkthrough uses the first one: Use <em>docfx.exe</em> directly.</p>
<ol>
<li>Download <em>docfx.zip</em> and unzip it to <code>D:\docfx\</code></li>
<li>Add <code>D:\docfx\</code> to <code>PATH</code> so that command <code>docfx</code> and be directly called from everywhere for convenience. (for example, for Windows, <code>set PATH=%PATH%;D:\docfx\</code></li>
</ol>
<h2 id="step2-init-a-docfx-project">Step2. Init a DocFX project</h2>
<ol>
<li>Create a new folder <code>D:\docfx_walkthrough</code></li>
<li>Start Command Line under <code>D:\docfx_walkthrough</code></li>
<li>Call <code>docfx init -q</code>. This command generates a <code>docfx_project</code> folder with the default <code>docfx.json</code> file under it. <code>docfx.json</code> is the configuration file <code>docfx</code> uses to generate documentation. <code>-q</code> option means generating the project quietly using default value, you can also try <code>docfx init</code> and follow the instructions to provide your own settings.</li>
</ol>
<h2 id="step3-build-our-website">Step3. Build our website</h2>
<p>Run command <code>docfx docfx_project/docfx.json</code>. Note that a new subfolder <code>_site</code> is generated under that folder. This is where the static website is generated.</p>
<h2 id="step4-preview-our-website">Step4. Preview our website</h2>
<p>The generated static website can be published to GitHub pages, Azure websites, or your own hosting services without any further changes. You can also run command <code>docfx serve docfx_project/_site</code> to preview the website locally.</p>
<p>If port <code>8080</code> is not in use, <code>docfx</code> will host <code>_site</code> under <code>http://localhost:8080</code>. If <code>8080</code> is in use, you can use <code>docfx serve _site -p &lt;port&gt;</code> to change the port to be used by <code>docfx</code>.</p>
<p>Congrats! You can now see a simple website similar to:
<img src="images/walkthrough_simple_homepage.png" alt="Homepage"></p>
<hr>
<h2 id="step5-add-a-set-of-articles-to-the-website">Step5. Add a set of articles to the website</h2>
<ol>
<li><p>Place more <code>.md</code> files to <code>articles</code>, e.g. <code>details1.md</code>, <code>details2.md</code>, <code>details3.md</code>. If the file references any resources, put those resources into the <code>images</code> folder.</p>
</li>
<li><p>In order to organize these articles, we add these files into <code>toc.yml</code> under <code>articles</code> subfolder. The content of <code>toc.yml</code> is as below:</p>
<pre><code class="lang-yml">- name: Introduction
  href: intro.md
- name: Details 1
  href: details1.md
- name: Details 2
  href: details2.md
- name: Details 3
  href: details3.md
</code></pre>
<p>So now our folder layout is:</p>
<pre><code>|- index.md
|- toc.yml
|- articles
|    |- intro.md
|    |- details1.md
|    |- details2.md
|    |- details3.md
|    |- toc.yml
|- images
    |- details1_image.png
</code></pre>
</li>
<li><p>Run <strong>Step3</strong> and <strong>Step4</strong> again, and the website is now:
<img src="images/walkthrough_step5.png" alt="Step7">.</p>
</li>
</ol>
<p>Notice that more items are added to the sidebar for <em>Articles</em> nav page. The title inside the sidebar is exactly what we set in the <code>toc.yml</code> inside <code>articles</code> subfolder.</p>
<h2 id="conclusion">Conclusion</h2>
<p>In this walkthrough, we build a website from a set of <code>.md</code> files. We call these <code>.md</code> files <strong>Conceptual Documentation</strong>. In walkthrough part 2, we will learn to add <strong>API Documentation</strong> to our website. The <strong>API Documentation</strong> is extracted directly from .NET source code. In a series of advanced walkthroughs, we will learn advanced concepts in <code>docfx</code>, such as <em>cross reference</em> between articles, <em>external reference</em> to other documentations, etc. We will also learn to customize our websites, from theme to layout to metadata extraction.</p>
<h2 id="read-more">Read more</h2>
<ul>
<li><p><a href="walkthrough_create_a_docfx_project_2.html">Walkthrough Part II: Adding API Documentation to the Website</a></p>
</li>
<li><p><a href="advanced_walkthrough.html">Walkthrough Advanced: Customize Your Website</a></p>
</li>
</ul>
<div id="disqus_thread"></div>
                <script>
                (function() { // DON'T EDIT BELOW THIS LINE
                var d = document, s = d.createElement('script');
                s.src = 'https://docfx-github.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
                })();
                </script>
                <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
            </article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="#disqus_thread" class="contribution-link">0 Comments</a>
                  </li>
                </ul>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to top</a>
            </span>
            <span>Copyright © 2015-2018 Microsoft<br>Generated by <strong>DocFX</strong></span>
            
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../../styles/docfx.js"></script>
    <script type="text/javascript" src="../../styles/main.js"></script>
    <script id="dsq-count-scr" src="//docfx-github.disqus.com/count.js" async=""></script>
    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-99241001-1', 'auto');
      ga('send', 'pageview');
    
    </script>
  </body>
</html>
